<!doctype html>
<html>
<head>
	<title>CSS3 patterned buttons</title>
     <link href='http://ell-moo.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>CSS3 patterned buttons</h1>

<br><br>

<button class="small button">Button</button>
<button class="small color red button">Button</button>
<button class="small color green button">Button</button>
<button class="small color blue button">Button</button>

<br><br>

<button class="small button" disabled>Button</button>
<button class="small color red button" disabled>Button</button>
<button class="small color green button" disabled>Button</button>
<button class="small color blue button" disabled>Button</button>

<br><br>

<ul class="button-group">
	<li><button class="small button">Button</button></li>
	<li><button class="small button">Button</button></li>
	<li><button class="small button">Button</button></li>
	<li><button class="small button">Button</button></li>
</ul>

<br><br><br><br>

<button class="button">Button</button>
<button class="color red button">Button</button>
<button class="color green button">Button</button>
<button class="color blue button">Button</button>

<br><br>

<button class="button" disabled>Button</button>
<button class="color red button" disabled>Button</button>
<button class="color green button" disabled>Button</button>
<button class="color blue button" disabled>Button</button>

<br><br>

<ul class="button-group">
	<li><button class="button">Button</button></li>
	<li><button class="button">Button</button></li>
	<li><button class="button">Button</button></li>
	<li><button class="button">Button</button></li>
</ul>

<br><br><br><br>

<button class="large button">Button</button>
<button class="large color red button">Button</button>
<button class="large color green button">Button</button>
<button class="large color blue button">Button</button>

<br><br>

<button class="large button" disabled>Button</button>
<button class="large color red button" disabled>Button</button>
<button class="large color green button" disabled>Button</button>
<button class="large color blue button" disabled>Button</button>

<br><br>

<ul class="button-group">
	<li><button class="large button">Button</button></li>
	<li><button class="large button">Button</button></li>
	<li><button class="large button">Button</button></li>
	<li><button class="large button">Button</button></li>
</ul>

<div class="column-clear"></div>
<div class="content">
<p>Tutorial - CSS3 Gradient Buttons</p>
<p id="home"><a class="go" href="http://ell-moo.blogspot.com" title="">Go to article page</a></p>
</div>

<div id="ribbon"><a href="http://ell-moo.blogspot.com">Ellmoo Mojito</a></div>
</body>
</html>